<template>
	<view class="bg">
		<xl-navbar title="Waterfall瀑布流" fixed shadow></xl-navbar>
		<view class="title">基础样式：固定窗口</view>
		<xl-waterfall :load="load" :fixedHeight="500" :top="20" :sides="30" @provider="provider">
			<template v-slot:item="{ item }">
				<view class="box">
					{{item.name}}
				</view>
			</template>
		</xl-waterfall>
		<view class="title">不固定窗口，瀑布流3列</view>
		<xl-waterfall :load="load" :fixed="false" :top="20" :sides="30" :columns="3" @provider="provider">
			<template v-slot:item="{ item }">
				<view class="box">
					{{item.name}}
				</view>
			</template>
		</xl-waterfall>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const load = ref(false)
	onMounted(()=>{
		setTimeout(() => {
			load.value = true
		}, 1000)
	})
	
	// 上拉加载、下拉刷新更新数据方法
	function provider(pageInfo, push){
		console.log(pageInfo);
		// 模拟请求成功后的回调
		setTimeout(() => {
			push([
				{name: 1, img: "/static/imgs/pic.png"},
				{name: 2, img: "/static/imgs/logo.png"},
				{name: 3, img: ""},
				{name: 4, img: "/static/imgs/bg/comp.png"},
				{name: 5, img: "/static/imgs/pic.png"},
				{name: 6, img: "/static/imgs/bg/index.png"},
				{name: 7, img: "/static/imgs/pic.png"},
				{name: 8, img: "/static/imgs/pic.png"},
				{name: 9, img: "/static/imgs/pic.png"},
				{name: 10, img: "/static/imgs/pic.png"},
			])
		}, 1600)
	}
</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	page {
		background-color: #f9f9f9;
	}
	/* #endif */
	.bg{
		background-color: #f9f9f9;
	}
	.box{
		height: 80rpx;
		line-height: 80rpx;
		background: #0a93ff;
		text-align: center;
		color: #ffffff;
	}
</style>